<template>
  <router-view />
</template>

<script setup>
// ...existing code...
</script>

<style>
html, body, #app {
  height: 100vh;
  width: 100vw;
  min-height: 100vh;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: var(--el-bg-gradient, #f7fbff);
}
</style>

<style>
.el-dialog, .el-message-box {
  background: var(--el-bg-color) !important;
  color: var(--el-text-color-primary) !important;
  box-shadow: var(--el-shadow) !important;
  border-radius: 12px;
  border: 1px solid var(--el-border-color);
}
.el-dialog__title, .el-message-box__content {
  color: var(--el-text-color-primary) !important;
}
.el-button--primary {
  background: var(--el-btn-primary) !important;
  border-color: var(--el-btn-primary) !important;
  color: #fff !important;
}
.el-button--primary:hover {
  background: var(--el-btn-primary-hover) !important;
  border-color: var(--el-btn-primary-hover) !important;
}
.el-input__inner, .el-input__wrapper {
  color: var(--el-text-color-primary) !important;
}
.el-input__inner::placeholder {
  color: var(--el-text-color-secondary) !important;
  opacity: 1;
}
.el-table .el-table__cell {
  padding: 20px 0 !important;
}
body .el-message,
::v-deep(.el-message) {
  right: 120px !important;
  left: auto !important;
}
.el-message {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.el-message.el-message-leave-active {
  transform: translateX(100vw) !important;
  opacity: 0 !important;
}
.el-message.el-message-enter-from {
  transform: translateX(-100vw) !important;
  opacity: 0 !important;
}
.el-message.el-message-enter-to {
  transform: translateX(0) !important;
  opacity: 1 !important;
}
</style>